<template>
    <el-dialog
        title="角色权限设置"
        v-model="visible"
        :width="500"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-tabs tab-position="top">
            <el-tab-pane label="菜单权限">
                <div class="treeMain">
                    <el-tree
                        ref="menu"
                        node-key="menuId"
                        :default-checked-keys="roleMenuIds"
                        :data="menu"
                        :props="menuProp"
						v-model="selectedKeys"
                        show-checkbox
                    ></el-tree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据权限">
                <el-form label-width="100px" label-position="left">
                    <el-form-item label="规则类型">
                        <el-select v-model="data.dataType" placeholder="请选择">
                            <el-option label="全部可见" value="1"></el-option>
                            <el-option label="本人可见" value="2"></el-option>
                            <el-option label="所在部门可见" value="3"></el-option>
                            <el-option label="所在部门及子级可见" value="4"></el-option>
                            <el-option label="选择的部门可见" value="5"></el-option>
                            <el-option label="自定义" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择部门" v-show="data.dataType=='5'">
                        <div class="treeMain" style="width: 100%;">
                            <el-tree
                                ref="dept"
                                node-key="id"
                                :data="data.list"
                                :props="data.props"
                                show-checkbox
                            ></el-tree>
                        </div>
                    </el-form-item>
                    <el-form-item label="规则值" v-show="data.dataType=='6'">
                        <el-input
                            v-model="data.rule"
                            clearable
                            type="textarea"
                            :rows="6"
                            placeholder="请输入自定义规则代码"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- <el-tab-pane label="控制台模块">
				<div class="treeMain">
					<el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="控制台">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="控制台视图">
						<el-select v-model="dashboard" placeholder="请选择">
							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
								<span style="float: left">{{ item.label }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
							</el-option>
						</el-select>
						<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
					</el-form-item>
				</el-form>
            </el-tab-pane>-->
        </el-tabs>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    emits: ["success", "closed"],
    data() {
        return {
            visible: false,
            isSaveing: false,
            menu: [],
            roleMenuIds: [],
            menuProp: {
                label: "menuName",
                value: "menuId",
                children: "children",
            },
            grid: {
                list: [],
                checked: [
                    "welcome",
                    "ver",
                    "time",
                    "progress",
                    "echarts",
                    "about",
                ],
                props: {
                    label: (data) => {
                        return data.title;
                    },
                    disabled: (data) => {
                        return data.isFixed;
                    },
                },
            },
            data: {
                dataType: "1",
                list: [],
                checked: [],
                props: {},
                rule: "",
            },
            dashboard: "0",
            entityObj: {},
			selectedKeys:[],
            dashboardOptions: [
                {
                    value: "0",
                    label: "数据统计",
                    views: "stats",
                },
                {
                    value: "1",
                    label: "工作台",
                    views: "work",
                },
            ],
        };
    },
    mounted() {
        // this.getMenu();
        // this.getDept();
        // this.getGrid();
    },
    methods: {
        open() {
            this.visible = true;
        },
        async submit() {
			const checkedKeys = this.$refs.menu.getCheckedKeys();
			console.log(checkedKeys)
            var returnValue = await this.$API.auth.PostProcessApi.post(
                "role/menu-auth",
                { roleId: this.entityObj.roleId,menuIds: checkedKeys}
            );
            if (returnValue.status == 200) {
                this.menu = returnValue.response;
				this.$emit("fatherMethod");
				this.visible = false;
            } else {
                this.$message.error("操作失败:" + returnValue.msg);
            }
        },
        async setData(data) {
            this.entityObj = data;
            await this.getMenu();
            await this.getRoleMenu();
        },
        async getMenu() {
            var returnValue = await this.$API.auth.PostProcessApi.post(
                "menu/trees",
                { orgMenuType: this.entityObj.orgType }
            );
            if (returnValue.status == 200) {
                this.menu = returnValue.response;
            } else {
                this.$message.error("操作失败:" + returnValue.msg);
            }
        },
        async getRoleMenu() {
            var returnValue = await this.$API.auth.GetProcessApi.get(
                `role/${this.entityObj.roleId}/menu-auth`,
                {}
            );
            if (returnValue.status == 200) {
                this.roleMenuIds = returnValue.response;
            } else {
                this.$message.error("操作失败:" + returnValue.msg);
            }
        },
        async getDept() {
            var res = await this.$API.system.dept.list.get();
            this.data.list = res.data;
            this.data.checked = ["12", "2", "21", "22", "1"];
            this.$nextTick(() => {
                let filterKeys = this.data.checked.filter(
                    (key) => this.$refs.dept.getNode(key).isLeaf
                );
                this.$refs.dept.setCheckedKeys(filterKeys, true);
            });
        },
    },
};
</script>

<style scoped>
.treeMain {
    height: 280px;
    overflow: auto;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;
}
</style>
